<template>
  <card-layout title="矿山概况" class="chart" bg="2">
    <template #extra>
      <div class="more-div" title="矿山详情" @click="detailsShow">
        <el-icon :size="18"><Menu /></el-icon>
      </div>
    </template>
    <div
      class="content"
      v-loading="loading"
      element-loading-background="rgba(255, 255, 255, 0.15)"
    >
      <!-- <el-row :gutter="20">
        <el-col :span="12">
          <div class="mine-num">37</div>
          <div class="mine-text">矿山总数</div>
        </el-col>
        <el-col :span="12">
          <div class="mine-num">6</div>
          <div class="mine-text">绿色矿山</div>
        </el-col>
      </el-row> -->
      <div class="businessTypePie">
        <div class="businessType"></div>
        <div id="minePie"></div>
      </div>
    </div>
  </card-layout>
</template>

<script setup>
import { getCurrentInstance } from "vue";
import * as echarts from "echarts";
const { proxy } = getCurrentInstance();
const emit = defineEmits(["mineDetailsShow"]);
let myChart;
let option = {
  tooltip: {
    trigger: "item",
  },
  title: {
    show: true,
    left: "23.5%", //文字左边距离
    top: "28%", //文字上边距离
    text: "37", //主标题(上边的文字)
    textStyle: {
      //主标题上边文字的样式
      fontFamily: "PangMen",
      color: "#0FF227",
      fontSize: 36,
      width: 100,
    },
    subtext: "矿山总数", //副标题(下边的文字)
    subtextStyle: {
      fontFamily: "PangMen",
      color: "#eef1fa",
      fontSize: 18,
    },
    textAlign: "center",
  },
  legend: {
    orient: "vertical",
    top: "middle",
    right: "25px",
    icon: "circle",
    align: "left",
    itemWidth: 8,
    textStyle: {
      //图例文字的样式
      color: "#eef1fa",
      fontSize: 14,
    },
  },
  series: [
    {
      name: "矿山种类",
      type: "pie",
      radius: ["75%", "90%"],
      center: ["25%", "50%"],
      padAngle: 3,
      avoidLabelOverlap: false,
      labelLine: {
        show: false,
      },
      label: {
        normal: {
          show: false,
          position: "outside",
          fontSize: 10,
          color: "#eef1fa",
        },
      },
      data: [
        { value: 2, name: "铜矿" },
        { value: 7, name: "砂石矿" },
        { value: 5, name: "白云石矿" },
        { value: 4, name: "石灰石矿" },
        { value: 3, name: "方解石矿" },
        { value: 7, name: "铁矿" },
        { value: 5, name: "水泥矿" },
        { value: 4, name: "建筑石料矿" },
        { value: 5, name: "金矿" },
        { value: 5, name: "银矿" },
      ],
    },
  ],
};
onMounted(() => {
  setTimeout(() => {
    myChart = echarts.init(document.getElementById("minePie"), null, {
      locale: "ZH",
    });
    myChart.setOption(option, true);
  }, 1000);
});
function detailsShow() {
  emit("mineDetailsShow");
}
</script>

<style lang="scss" scoped>
.chart {
  box-sizing: border-box;
  // flex: 1;
  .more-div {
    color: #bbcfff;
    cursor: pointer;
  }
  .more-div:active {
    scale: 0.8;
  }
  .content {
    height: 180px;
  }
  .mine-num {
    font-family: PangMen;
    color: #0ff227;
    font-size: 28px;
    font-style: normal;
    font-weight: 500;
    text-align: center;
    margin-top: 10px;
  }
  .mine-text {
    font-family: PangMen;
    color: #fff;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    text-align: center;
  }
  #minePie {
    width: 100%;
    height: 170px;
  }
  .businessTypePie {
    position: relative;
    width: 100%;
    height: 170px;
    margin-top: 10px;
    .businessType {
      position: absolute;
      width: 118.11px;
      height: 118.28px;
      border-radius: 50%;
      top: 15.3%;
      left: 10.3%;
      background-image: radial-gradient(
        rgba(6, 162, 255, 0.1) 45%,
        rgba(0, 134, 255, 0.42) 65%,
        #000329 86%
      );
    }
  }
}
</style>
